<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            var jiangsu = {
                "id": 1001,
                "name": "江苏省",
                "cities": [
                    {
                        "id": 1,
                        "name": "南京市"
                    },
                    {
                        "id": 2,
                        "name": "苏州市"
                    },
                    {
                        "id": 3,
                        "name": "淮安"
                    },
                    {
                        "id": 4,
                        "name": "南通"
                    }
                ]
            };
            var guangdong = {
                "id": 1002,
                "name": "广东省",
                "cities": [
                    {
                        "id": 1,
                        "name": "广州市"
                    },
                    {
                        "id": 2,
                        "name": "珠海市"
                    },
                    {
                        "id": 3,
                        "name": "东莞市"
                    },
                    {
                        "id": 4,
                        "name": "深圳市"
                    }
                ]
            };
            var shandong = {
                "id": 1003,
                "name": "山东省",
                "cities": [
                    {
                        "id": 1,
                        "name": "青岛市"
                    },
                    {
                        "id": 2,
                        "name": "日照市"
                    },
                    {
                        "id": 3,
                        "name": "济南市"
                    },
                    {
                        "id": 4,
                        "name": "烟台市"
                    }
                ]
            };
            var provinces = [jiangsu, guangdong, shandong];
            window.onload = function () {
                //获取DOM对象
                var province = document.getElementById("province");
                var city = document.getElementById("city");
                for (var i = 0; i < provinces.length; i++) {
                    var option = new Option(provinces[i].name, provinces[i].id);
                    province.add(option);
                }

                //onchange:当下拉列表的选项内容发生改变的时候触发
                province.onchange = function () {

                    //清空下拉列表(保留了第一条)
                    city.length = 1;
                    //获取选中项的索引值
                    var selectedIndex = province.selectedIndex;
                    if (selectedIndex > 0) {

                        //获取选中项的省份
                        var p = provinces[selectedIndex - 1];

                        //获取选中项的省份所对应的城市
                        var cities = p.cities;
                        //通过循环创建城市的option
                        for (var j = 0; j < cities.length; j++) {
                            var option = new Option(cities[j].name, cities[j].id);
                            city.add(option);
                        }
                    }


                };


            };

        </script>
    </head>
    <body>
        <select name="" id="province">
            <option value="0">--请选择省份--</option>
        </select>
        <select name="" id="city">
            <option value="0">--请选择城市--</option>
        </select>
    </body>
</html>